<template>
      <div class="boxs">
                  <div class="table">

                    <el-table
                        :data="list"
                        border
                        height="550"
                        style="width: 100%">
                      <el-table-column
                          prop="uid"
                          label="编码"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="mobile"
                          label="电话"
                          >
                      </el-table-column>
                      <el-table-column
                          prop="avatar"
                          label="头像">
                          <template slot-scope="scope">
                            <img :src="scope.row.avatar" width="50px">
                          </template>
                      </el-table-column>
                      <el-table-column
                          prop="nickname"
                          label="姓名">
                      </el-table-column>
                      <el-table-column
                          prop="created_at"
                          label="时间">
                        <template slot-scope="scope">
                            <p>{{scope.row.created_at | time}}</p>
                        </template>
                      </el-table-column>

                      <el-table-column
                          fixed="right"
                          label="操作"
                         >
                        <template slot-scope="scope">
                          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row)">删除</el-button>
                          <el-button icon="el-icon-search" circle @click="edit(scope.row)">编辑</el-button>
                        </template>
                      </el-table-column>

                    </el-table>
                            <div class="page">
                              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                             :current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
                                             layout="total, sizes, prev, pager, next, jumper" :total="total">
                              </el-pagination>
                            </div>
                  </div>


                  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                      <el-form-item label="姓名" >
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                      </el-form-item>

                      <el-form-item label="电话" >
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                      </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="ok">确 定</el-button>
                    </div>
                  </el-dialog>
      </div>
</template>

<script>
export default {
  data(){
    return{
      list:[],
      data:[],
      limit:5,
      total:null,
      page:1,
      searchData: "",
      dialogFormVisible:false,
      form:{
        name:'',
        phone:'',
        id:'',
      }
    }
  },
  filters:{
      time:function (time){
          var date=new Date(time*1000)
        function timeAdd0(str) {
          if(str<10){
            str='0'+str;
          }
          return str
        }
              var y = date.getFullYear();
              var m = date.getMonth()+1;
              var d = date.getDate();
              var h = date.getHours();
              var mm = date.getMinutes();
              var s = date.getSeconds();
        return y+'-'+timeAdd0(m)+'-'+timeAdd0(d)+' '+timeAdd0(h)+':'+timeAdd0(mm)+':'+timeAdd0(s);
      }
  },
  mounted() {
      this.pagelist()
  },
  methods:{
    pagelist(){
      this.$axios.get('/list.json').then(res=>{
        this.data=res.data
        this.getlist()
      })

    },
    getlist(){
      let list = this.data.filter((item, index) =>
          item.nickname.includes(this.searchData)
      )
      this.list = list.filter((item, index) =>
          index < this.page * this.limit && index >= this.limit * (this.page - 1)
      )
      this.total = list.length
    },
    handleSizeChange(val){
        //console.log(val)
        this.limit=val
        this.getlist()
    },
        handleCurrentChange(val){
          this.page=val
          this.getlist()
        },
      del(row){
          //console.log(row)
        this.list.map((el,index)=>{
          if(el.uid==row.uid){
              this.list.splice(index,1)
          }
        })
      },
    edit(row){
            this.dialogFormVisible=true
            this.form.name=row.nickname
            this.form.phone=row.mobile
            this.form.id=row.uid
    },
    ok(){
        this.dialogFormVisible=false
        this.list.map(el=>{
          if(this.form.id==el.uid){
              el.nickname=this.form.name
              el.mobile=this.form.phone
          }
        })
    }
  }
}
</script>

<style scoped>
.boxs{
  width: 100%;
  height: 100vh;
  border: 1px solid gray;
}
.table{
  width: 100%;
  height: 90vh;
  border: 1px solid red;
}
.page{
  width: 100%;
  height: 10vh;
}
</style>